{extend name="layout/iframe_layout" /}

{block name="title"}后台管理系统{/block}

{block name="style"}
<style>
  :root {
    --primary-color: #409EFF;
    --success-color: #67C23A;
    --warning-color: #E6A23C;
    --danger-color: #F56C6C;
    --info-color: #909399;
  }

  .container {
    margin-top: 30px;
  }

  .dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }

  .card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    transition: all 0.3s;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.1);
  }

  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
  }

  .card-header i {
    margin-right: 10px;
    color: var(--primary-color);
    font-size: 1.4em;
  }

  .card-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: #303133;
  }

  .stat-number {
    font-size: 2em;
    font-weight: bold;
    color: var(--primary-color);
  }

  .todo-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #ebeef5;
  }

  .todo-item:last-child {
    border-bottom: none;
  }

  .todo-checkbox {
    margin-right: 10px;
  }

  .progress-container {
    margin: 15px 0;
    background-color: #ebeef5;
    border-radius: 20px;
    height: 10px;
  }

  .progress-bar {
    height: 100%;
    border-radius: 20px;
    transition: width 0.5s ease;
  }

  .progress-info {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 0.9em;
    color: #909399;
  }

  .message-item {
    padding: 10px 0;
    border-bottom: 1px dashed #ebeef5;
  }

  .message-item:last-child {
    border-bottom: none;
  }

  .message-time {
    font-size: 0.8em;
    color: #909399;
  }

  .actions {
    margin-top: 30px;
  }

  .actions button {
    padding: 8px 15px;
    margin-right: 10px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .actions button:hover {
    opacity: 0.8;
  }
</style>
{/block}

{block name="content"}
<div id="app">
  <div class="container">
    <h1>后台管理首页</h1>
    <div class="dashboard">
      <!-- 统计卡片 -->
      <div class="card">
        <div class="card-header">
          <i>👥</i>
          <h3>用户数量</h3>
        </div>
        <div class="stat-number">{{ stats.users }}</div>
      </div>

      <div class="card">
        <div class="card-header">
          <i>📦</i>
          <h3>订单数量</h3>
        </div>
        <div class="stat-number">{{ stats.orders }}</div>
      </div>

      <div class="card">
        <div class="card-header">
          <i>🛍️</i>
          <h3>产品数量</h3>
        </div>
        <div class="stat-number">{{ stats.products }}</div>
      </div>

      <!-- 待办任务卡片 -->
      <div class="card">
        <div class="card-header">
          <i>✅</i>
          <h3>待办任务</h3>
        </div>
        <div class="todo-list">
          <div class="todo-item" v-for="(todo, index) in todos" :key="index">
            <input type="checkbox" class="todo-checkbox" v-model="todo.completed">
            <span :class="{ 'completed': todo.completed }">{{ todo.text }}</span>
          </div>
        </div>
      </div>

      <!-- 项目进度卡片 -->
      <div class="card">
        <div class="card-header">
          <i>📊</i>
          <h3>项目进度</h3>
        </div>
        <div class="progress-container">
          <div class="progress-bar" :style="{ width: progress + '%', 'background-color': progressColor }"></div>
        </div>
        <div class="progress-info">
          <span>完成度</span>
          <span>{{ progress }}%</span>
        </div>
        <div class="progress-info">
          <span>ETA</span>
          <span>2023-04-15</span>
        </div>
        <div class="progress-info">
          <span>任务</span>
          <span>3/5</span>
        </div>
        <div class="progress-info">
          <span>优先级</span>
          <span>高</span>
        </div>
      </div>

      <!-- 消息通知卡片 -->
      <div class="card">
        <div class="card-header">
          <i>🔔</i>
          <h3>消息通知</h3>
          <span style="margin-left: auto; color: var(--danger-color);">3条未读</span>
        </div>
        <div class="message-list">
          <div class="message-item" v-for="(message, index) in messages" :key="index">
            <div>{{ message.content }}</div>
            <div class="message-time">{{ message.time }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="actions">
      <h3>常用操作</h3>
      <button @click="goToUsers">用户管理</button>
      <button @click="goToOrders">订单管理</button>
      <button @click="goToProducts">产品管理</button>
    </div>
  </div>
</div>
{/block}

{block name="script"}
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        stats: {
          users: 0,
          orders: 0,
          products: 0
        },
        todos: [
          { text: '处理用户反馈', completed: false },
          { text: '更新产品文档', completed: false },
          { text: '检查系统日志', completed: true }
        ],
        progress: 65,
        messages: [
          { content: '新用户注册成功', time: '10分钟前' },
          { content: '订单#12345已完成支付', time: '30分钟前' },
          { content: '系统将在今晚23:00进行维护', time: '1小时前' }
        ]
      };
    },
    computed: {
      progressColor() {
        if (this.progress < 30) return '#F56C6C';
        if (this.progress < 70) return '#E6A23C';
        return '#67C23A';
      }
    },
    methods: {
      goToUsers() {
        // 这里可以替换为实际的跳转路径
        alert('跳转到用户管理');
      },
      goToOrders() {
        alert('跳转到订单管理');
      },
      goToProducts() {
        alert('跳转到产品管理');
      }
    },
    mounted() {
      // 模拟从服务器获取数据
      setTimeout(() => {
        this.stats = {
          users: 1234,
          orders: 567,
          products: 89
        };
      }, 1000);
    }
  });
</script>
{/block}
